<route lang="json5" type="page">
{
    layout: "default",
    style: {
        navigationBarTitleText: "设置",
    },
}
</route>

<template>
    <view class="m-base-box m-user-setting">
        <!-- <wd-tabs v-model="tab" custom-class="u-self-tabs">
            <block v-for="item in tabs" :key="item">
                <wd-tab :title="`${item}`"> </wd-tab>
            </block>
        </wd-tabs> -->
        <view class="px-4 pt-2">
            <wd-form ref="form" :model="model">
                <wd-cell-group custom-class="group" title="基础信息" border>
                    <wd-input
                        label="昵称"
                        label-width="100px"
                        prop="name"
                        required
                        clearable
                        v-model="model.name"
                        placeholder="请输入昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                    <wd-input
                        label="年龄"
                        label-width="100px"
                        prop="age"
                        type="number"
                        required
                        clearable
                        v-model="model.age"
                        placeholder="请输入年龄"
                        inputmode="numeric"
                        :rules="[
                            { required: true, message: '请填写年龄' },
                            { required: true, pattern: /^(0|[1-9]\d?|100)$/, message: '请输入有效的年龄0-100' },
                        ]"
                    />
                    <wd-input
                        label="手机号"
                        label-width="100px"
                        prop="phone"
                        type="number"
                        required
                        clearable
                        v-model="model.phone"
                        placeholder="请输入手机号"
                        inputmode="tel"
                        :rules="[
                            { required: true, message: '请输入电话' },
                            { required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' },
                        ]"
                    />
                </wd-cell-group>
                <view class="footer mt-4">
                    <wd-button type="primary" size="large" @click="handleSubmit" block>修改</wd-button>
                </view>
            </wd-form>
        </view>
        <!-- <view class="px-4" v-if="tab == 1">anquan </view> -->
    </view>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/user";
import { updateUserInfoUsingPost, editUsingPost } from "@/service/app";
import { useToast } from "wot-design-uni";
const toast = useToast();
const userStore = useUserStore();
const userInfo = ref<any>(null);
// const tab = ref(0);
// const tabs = ref(["基本设置"]);
const model = ref<any>({});
const form = ref<any>(null);
function handleSubmit() {
    form.value
        .validate()
        .then(({ valid, errors }) => {
            if (valid) {
                if (userStore.userType == "fz") {
                    editUsingPost({ body: model.value }).then((res) => {
                        console.log(res, "res");
                        userStore.setUserInfo(model.value);
                        toast.success("修改成功");
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    });
                } else {
                    updateUserInfoUsingPost({ body: model.value }).then((res) => {
                        console.log(res, "res");
                        userStore.setUserInfo(model.value);
                        toast.success("修改成功");
                        setTimeout(() => {
                            uni.navigateBack();
                        }, 1000);
                    });
                }
            }
        })
        .catch((error) => {
            console.log(error, "error");
        });
}
onLoad(() => {
    userInfo.value = userStore.userInfo;
    model.value = { ...userInfo.value };
});
</script>

<style lang="scss" scoped>
.m-user-setting {
}
</style>
